<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="X-UA-Compatible" content="IE=EDGE"/>
 <meta http-equiv="Content-Type" content="text/html; charset=Windows-1252"/>
 <meta name="Generator" content="Xara HTML filter v.7.0.2.946"/>
 <meta name="XAR Files" content="index_htm_files/xr_files.txt"/>
 <title>getting started</title>
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <script language="JavaScript" type="text/javascript">document.documentElement.className="xr_bgh2";</script>
 <link rel="stylesheet" type="text/css" href="index_htm_files/xr_main.css"/>
 <link rel="stylesheet" type="text/css" href="index_htm_files/xr_text.css"/>
 <link rel="stylesheet" type="text/css" href="index_htm_files/custom_styles.css"/>
 <script type="text/javascript" src="index_htm_files/roe.js"></script>
</head>
<body class="xr_bgb2">
<div class="xr_ap" id="xr_xr" style="width: 760px; height: 6238px; top:0px; left:50%; margin-left: -380px;">
 <script type="text/javascript">var xr_xr=document.getElementById("xr_xr")</script>
<div id="xr_td" class="xr_td">
<div class="xr_ap xr_xri_" style="width: 760px; height: 6238px;">
 <span class="xr_ar" style="left: -564px; top: 6173px; width: 1900px; height: 65px; background-color: #2F7FAC;"></span>
 <div class="xr_s0" style="position: absolute; left:36px; top:191px; width:10px; height:10px;font-family:Times New Roman;">
  <span class="xr_tl xr_s0" style="top: -14px;font-family:Times New Roman;"><span class="xr_s4" style="">Organizing your project folders and images before you begin.</span></span>
  <span class="xr_tl xr_s1" style="top: 27px;">Before you start up Spriter itself, its important to understand, Spriter is not used to draw images from </span>
  <span class="xr_tl xr_s1" style="top: 44px;">scratch, it's used to combine, move, rotate and stretch images you've already created in order to create </span>
  <span class="xr_tl xr_s1" style="top: 62px;">fully assembled frames and animations.</span>
 </div>
 <div class="xr_s4" style="position: absolute; left:36px; top:2902px; width:676px; height:476px;">
  <span class="xr_tl xr_s4" style="left: 258px; top: -14px;">Step 8) (Creating bones to more easily animate complex </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 3px;"><span class="xr_s4" style="">objects or characters) </span>While you are not </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 21px;">required to use bones to animate with Spriter, and in act, for </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 39px;">many types of animations bones would </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 57px;">just be an inconvenience, for the case of animating complex </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 74px;">objects or characters the initial investment </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 92px;">of literally a minute or two to &#8220;rig&#8221; the character with bones will </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 110px;">end up making work much easier and </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 127px;">more natural, and save you a lot of time, even resulting in a </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 145px;">superior final animation.&nbsp; To create bones, </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 163px;">simply hold the Alt key and left click and drag from the point </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 181px;">you want the bone to begin to the point </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 198px;">where you want the bone to end.&nbsp; The point where the bone </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 216px;">begins (the thick end) acts as the pivot </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 234px;">point of the bone. When you let go of the left mouse button that </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 252px;">bone is done being created and is </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 269px;">automatically selected...if you create a new bone while the </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 287px;">previous bone is still selected, the new bone </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 305px;">will automatically be a child of the selected bone.&nbsp; You can </span>
  <span class="xr_tl xr_s1" style="left: 258px; top: 322px;">continue to hold Alt and create all of the </span>
  <span class="xr_tl xr_s1" style="top: 340px;">bones you need for the full character...just be sure the bone you want to be the next bone's parent is </span>
  <span class="xr_tl xr_s1" style="top: 358px;">selected while creating the new bone.&nbsp; At any time in this process you can let go of the Alt key and </span>
  <span class="xr_tl xr_s1" style="top: 376px;">select, move, rotate and scale any of the bones to perfect their position relative to the sprites you will be </span>
  <span class="xr_tl xr_s0" style="top: 393px;font-family:Times New Roman;"><span class="xr_s1" style="">assigning to them.</span></span>
 </div>
 <img class="xr_ap" src="index_htm_files/201.jpg" alt="" title="" style="left: 36px; top: 2891px; width: 250px; height: 334px;"/>
 <div class="xr_s4" style="position: absolute; left:27px; top:2539px; width:673px; height:414px;">
  <span class="xr_tl xr_s4" style="left: 275px; top: -14px;">Step 7) (Aligning the assembled key-frame to the canvas </span>
  <span class="xr_tl xr_s1" style="left: 275px; top: 3px;"><span class="xr_s4" style="">crosshair) </span>Now that your first key frame is </span>
  <span class="xr_tl xr_s1" style="left: 275px; top: 21px;">properly assembled, you might want to make sure that the </span>
  <span class="xr_tl xr_s1" style="left: 275px; top: 39px;">entire frame (all sprites collectively) is </span>
  <span class="xr_tl xr_s1" style="left: 275px; top: 57px;">aligned to the &#8220;canvas crosshair&#8221; in a manner that will be </span>
  <span class="xr_tl xr_s1" style="left: 275px; top: 74px;">most useful for game engines.&nbsp; The point </span>
  <span class="xr_tl xr_s1" style="left: 275px; top: 92px;">where the vertical and horizontal lines bisect the canvas </span>
  <span class="xr_tl xr_s1" style="left: 275px; top: 110px;">represent coordinate 0,0 for the frame.&nbsp; If you </span>
  <span class="xr_tl xr_s1" style="left: 275px; top: 127px;">tell a game engine to draw your frame to the screen at a given </span>
  <span class="xr_tl xr_s1" style="left: 275px; top: 145px;">coordinate, it will place the animation </span>
  <span class="xr_tl xr_s1" style="left: 275px; top: 163px;">based on this&nbsp; 0,0 point as it's pivot point or &#8220;hotspot&#8221;.&nbsp; In the </span>
  <span class="xr_tl xr_s1" style="left: 275px; top: 181px;">case of this example, for a platformer </span>
  <span class="xr_tl xr_s1" style="left: 275px; top: 198px;">character, you'd likely want the 0,0 coordinate (canvas cross-</span>
  <span class="xr_tl xr_s1" style="left: 275px; top: 216px;">hair) centered near the feat of the </span>
  <span class="xr_tl xr_s1" style="left: 275px; top: 234px;">character.&nbsp; To move all sprites at once you can press Cntrl+A </span>
  <span class="xr_tl xr_s1" style="left: 275px; top: 252px;">to instantly select all objects on the </span>
  <span class="xr_tl xr_s1" style="left: 275px; top: 269px;">canvas or left click and drag a selection rectangle to select all </span>
  <span class="xr_tl xr_s1" style="top: 287px;">of the objects. You can then use the arrow keys or click and drag on any of the selected objects to move </span>
  <span class="xr_tl xr_s1" style="top: 305px;">everything at once to properly align the frame.</span>
 </div>
 <img class="xr_ap" src="index_htm_files/202.jpg" alt="" title="" style="left: 36px; top: 2526px; width: 258px; height: 288px;"/>
 <div class="xr_s4" style="position: absolute; left:36px; top:2251px; width:670px; height:306px;">
  <span class="xr_tl xr_s4" style="left: 382px; top: -14px;">Step 6) (adjusting the z-order of sprites) </span>
  <span class="xr_tl xr_s1" style="left: 382px; top: 3px;">As you assemble and tweak your initial key-</span>
  <span class="xr_tl xr_s1" style="left: 382px; top: 21px;">frame you may need to adjust the z-order of </span>
  <span class="xr_tl xr_s1" style="left: 382px; top: 39px;">your Sprites.&nbsp; (the order in which they are </span>
  <span class="xr_tl xr_s1" style="left: 382px; top: 57px;">drawn on screen..in other words, </span>
  <span class="xr_tl xr_s1" style="left: 382px; top: 74px;">which are in front and which are behind). </span>
  <span class="xr_tl xr_s1" style="left: 382px; top: 92px;">This can be done by clicking and dragging </span>
  <span class="xr_tl xr_s1" style="left: 382px; top: 110px;">on the sprites in the z-order palette on the </span>
  <span class="xr_tl xr_s1" style="left: 382px; top: 127px;">upper-left of your screen or by selecting a </span>
  <span class="xr_tl xr_s1" style="left: 382px; top: 145px;">sprite on the canvas and then holding Cntrl </span>
  <span class="xr_tl xr_s1" style="left: 382px; top: 163px;">and pressing the up or down arrows.&nbsp; You </span>
  <span class="xr_tl xr_s1" style="left: 382px; top: 181px;">can also hold Cntrl and press the left or right </span>
  <span class="xr_tl xr_s1" style="left: 382px; top: 198px;">arrows to send the selected sprite to the </span>
  <span class="xr_tl xr_s1" style="left: 382px; top: 216px;">absolute top or bottom of the z-order </span>
  <span class="xr_tl xr_s1" style="left: 382px; top: 234px;">respectively.</span>
 </div>
 <img class="xr_ap" src="index_htm_files/203.jpg" alt="" title="" style="left: 36px; top: 2245px; width: 374px; height: 250px;"/>
 <div class="xr_s4" style="position: absolute; left:36px; top:1895px; width:675px; height:392px;">
  <span class="xr_tl xr_s4" style="left: 422px; top: -14px;">Step 5) (Adding Sprites to the canvas </span>
  <span class="xr_tl xr_s1" style="left: 422px; top: 3px;"><span class="xr_s4" style="">and manipulating them) </span>Now that </span>
  <span class="xr_tl xr_s1" style="left: 422px; top: 21px;">your images are ready to </span>
  <span class="xr_tl xr_s1" style="left: 422px; top: 39px;">use, you can simply start dragging </span>
  <span class="xr_tl xr_s1" style="left: 422px; top: 57px;">them from the file palette&nbsp; onto the </span>
  <span class="xr_tl xr_s1" style="left: 422px; top: 74px;">&#8220;canvas&#8221; in the center of your </span>
  <span class="xr_tl xr_s1" style="left: 422px; top: 92px;">screen to begin assembling the first </span>
  <span class="xr_tl xr_s1" style="left: 422px; top: 110px;">key frame.&nbsp; Once on the canvas, you </span>
  <span class="xr_tl xr_s1" style="left: 422px; top: 127px;">can select any Sprite (the </span>
  <span class="xr_tl xr_s1" style="left: 422px; top: 145px;">image's you've placed) by left clicking, </span>
  <span class="xr_tl xr_s1" style="left: 422px; top: 163px;">and then use the transform controls </span>
  <span class="xr_tl xr_s1" style="left: 422px; top: 181px;">which appear around the </span>
  <span class="xr_tl xr_s1" style="left: 422px; top: 198px;">sprite to rotate it or stretch it as you </span>
  <span class="xr_tl xr_s1" style="left: 422px; top: 216px;">need.&nbsp; You can also use the &#8220;object </span>
  <span class="xr_tl xr_s1" style="left: 422px; top: 234px;">properties&#8221; dialogue on the </span>
  <span class="xr_tl xr_s1" style="left: 422px; top: 252px;">lower left of your screen to keep track </span>
  <span class="xr_tl xr_s1" style="left: 422px; top: 269px;">of or carefully edit any of the&nbsp; </span>
  <span class="xr_tl xr_s1" style="left: 422px; top: 287px;">currently selected sprites </span>
  <span class="xr_tl xr_s1" style="top: 305px;">attributes. This palette can also be used to adjust the currently selected sprites opacity.</span>
 </div>
 <img class="xr_ap" src="index_htm_files/204.jpg" alt="" title="" style="left: 36px; top: 1884px; width: 415px; height: 306px;"/>
 <div class="xr_s1" style="position: absolute; left:41px; top:1402px; width:668px; height:475px;">
  <span class="xr_tl xr_s1" style="left: 293px; top: -14px;"><span class="xr_s4" style="">Step 4) (Setting default pivot points for Sprites) </span>On the </span>
  <span class="xr_tl xr_s1" style="left: 293px; top: 3px;">upper right of your screen (above the </span>
  <span class="xr_tl xr_s1" style="left: 293px; top: 21px;">animation palette) you should see the file palette.&nbsp; Use this </span>
  <span class="xr_tl xr_s1" style="left: 293px; top: 39px;">palette to browse through the image folder's </span>
  <span class="xr_tl xr_s1" style="left: 293px; top: 57px;">you'd created in step one to find the images you'll be </span>
  <span class="xr_tl xr_s1" style="left: 293px; top: 74px;">using to assemble the initial key-frame.&nbsp; Before </span>
  <span class="xr_tl xr_s1" style="left: 293px; top: 92px;">you begin using the images you might want to take your </span>
  <span class="xr_tl xr_s1" style="left: 293px; top: 110px;">time to give each image a custom pivot point. </span>
  <span class="xr_tl xr_s1" style="left: 293px; top: 127px;">(images default to a top-left pivot point, and its often </span>
  <span class="xr_tl xr_s1" style="left: 293px; top: 145px;">more convenient and leads to better final results </span>
  <span class="xr_tl xr_s1" style="left: 293px; top: 163px;">to set pivot-points based on actual aspects of the image in </span>
  <span class="xr_tl xr_s1" style="left: 293px; top: 181px;">question...for example, the image of an upper </span>
  <span class="xr_tl xr_s1" style="left: 293px; top: 198px;">arm would scale and rotate more naturally around a pivot </span>
  <span class="xr_tl xr_s1" style="left: 293px; top: 216px;">point set in the center of the shoulder).&nbsp; To </span>
  <span class="xr_tl xr_s1" style="left: 293px; top: 234px;">set a default pivot point for an image, double-click on that </span>
  <span class="xr_tl xr_s1" style="left: 293px; top: 252px;">image in the file palette and a dialogue box </span>
  <span class="xr_tl xr_s1" style="left: 293px; top: 269px;">will appear giving you the ability to set the pivot point. </span>
  <span class="xr_tl xr_s1" style="left: 293px; top: 287px;">Once you've set the pivot point how you'd like, </span>
  <span class="xr_tl xr_s1" style="left: 293px; top: 305px;">click OK.</span>
 </div>
 <img class="xr_ap" src="index_htm_files/205.jpg" alt="" title="" style="left: 36px; top: 1391px; width: 290px; height: 462px;"/>
 <div class="xr_s1" style="position: absolute; left:45px; top:1020px; width:670px; height:485px;">
  <span class="xr_tl xr_s1" style="left: 243px; top: -14px;"><span class="xr_s4" style="">Step 3) </span>toward the lower right of your screen you should see the </span>
  <span class="xr_tl xr_s1" style="left: 243px; top: 3px;">&#8220;animations palette&#8221; You'll see Spriter started your new project </span>
  <span class="xr_tl xr_s1" style="left: 243px; top: 21px;">file with its first entity (character) and first animation for that </span>
  <span class="xr_tl xr_s1" style="left: 243px; top: 39px;">character. You can double-click on the name of either to rename </span>
  <span class="xr_tl xr_s1" style="left: 243px; top: 57px;">them to something more descriptive... for example, you could </span>
  <span class="xr_tl xr_s1" style="left: 243px; top: 74px;">rename the entity to &#8220;hero&#8221;, and the animation to &#8220;idle&#8221;</span>
 </div>
 <img class="xr_ap" src="index_htm_files/206.jpg" alt="" title="" style="left: 36px; top: 1006px; width: 245px; height: 358px;"/>
 <div class="xr_s4" style="position: absolute; left:39px; top:730px; width:669px; height:404px;">
  <span class="xr_tl xr_s4" style="left: 323px; top: -14px;">Step 2) (Starting Spriter and creating your project </span>
  <span class="xr_tl xr_s1" style="left: 323px; top: 3px;"><span class="xr_s4" style="">file) </span>Start Spriter and from the main menu </span>
  <span class="xr_tl xr_s1" style="left: 323px; top: 21px;">choose: File/New Project or hold Cntrl+N.</span>
  <span class="xr_tl xr_s1" style="left: 323px; top: 57px;">You will be prompted to choose the root folder for </span>
  <span class="xr_tl xr_s1" style="left: 323px; top: 74px;">your project.&nbsp; Click OK and then use the file </span>
  <span class="xr_tl xr_s1" style="left: 323px; top: 92px;">dialogue to direct Spriter to the main project folder </span>
  <span class="xr_tl xr_s1" style="left: 323px; top: 110px;">you had created.. In the case o four example, this </span>
  <span class="xr_tl xr_s1" style="left: 323px; top: 127px;">would be the folder called &#8220;Platformer&#8221;.&nbsp; Spriter's </span>
  <span class="xr_tl xr_s1" style="left: 323px; top: 145px;">working interface will then appear and you'll be </span>
  <span class="xr_tl xr_s5" style="left: 323px; top: 163px;"><span class="xr_s1" style="">ready to begin creating your first key frame.</span></span>
 </div>
 <img class="xr_ap" src="index_htm_files/207.jpg" alt="" title="" style="left: 36px; top: 716px; width: 318px; height: 237px;"/>
 <div class="xr_s1" style="position: absolute; left:44px; top:632px; width:671px; height:92px;">
  <span class="xr_tl xr_s1" style="top: -14px;"><span class="xr_s4" style="">IMPORTANT! </span>Once you begin your Spriter project, the actual Spriter file (.scml) should always be </span>
  <span class="xr_tl xr_s1" style="top: 3px;">saved in the main project folder which you'd created.&nbsp; You can save backup files of the .scml anywhere </span>
  <span class="xr_tl xr_s1" style="top: 21px;">you'd like, but if you then load them, they won't know where to find the required images because </span>
  <span class="xr_tl xr_s0" style="top: 39px;font-family:Times New Roman;"><span class="xr_s1" style="">Spriter only looks for images from the same root as the .scml file itself.</span></span>
 </div>
 <div class="xr_s4" style="position: absolute; left:44px; top:986px; width:646px; height:34px;">
  <span class="xr_tl xr_s4" style="top: -14px;">Creating the initial key-frame.</span>
 </div>
 <div class="xr_s1" style="position: absolute; left:36px; top:3359px; width:676px; height:476px;">
  <span class="xr_tl xr_s1" style="left: 202px; top: -14px;"><span class="xr_s4" style="">Step 9) (Assigning Sprites as children of bones) </span>Now that your bones </span>
  <span class="xr_tl xr_s1" style="left: 202px; top: 3px;">are set up where you want for the whole character, properly aligned with </span>
  <span class="xr_tl xr_s1" style="left: 202px; top: 21px;">the sprites, you just need assign (child) the appropriate sprites to each of </span>
  <span class="xr_tl xr_s1" style="left: 202px; top: 39px;">them.&nbsp; To do this, simple select a bone by left clicking on it, and then hold </span>
  <span class="xr_tl xr_s1" style="left: 202px; top: 57px;">the B key...you'll see all Sprites become more translucent.&nbsp; Now if you </span>
  <span class="xr_tl xr_s1" style="left: 202px; top: 74px;">left click on any Sprite while still holding the B key, that Sprite will </span>
  <span class="xr_tl xr_s1" style="left: 202px; top: 92px;">become a child of the selected bone.&nbsp; You will see that it is now assigned </span>
  <span class="xr_tl xr_s1" style="left: 202px; top: 110px;">because the sprite is now more opaque.&nbsp; If you click that same sprite </span>
  <span class="xr_tl xr_s1" style="left: 202px; top: 127px;">again while holding B it will disassociate that sprite from the selected </span>
  <span class="xr_tl xr_s1" style="left: 202px; top: 145px;">bone.&nbsp; You can select as many sprites to each bone as you'd like. He sprite </span>
  <span class="xr_tl xr_s1" style="left: 202px; top: 163px;">does not have to be touching the bone, or even be close in proximity to </span>
  <span class="xr_tl xr_s1" style="left: 202px; top: 181px;">the bone.&nbsp; Once finished assigning all sprites to their respective bones I </span>
  <span class="xr_tl xr_s1" style="left: 202px; top: 198px;">recommend you quickly play with putting the character in extreme poses </span>
  <span class="xr_tl xr_s1" style="left: 202px; top: 216px;">with limbs overlapping the body and the other limbs so you can double-</span>
  <span class="xr_tl xr_s1" style="left: 202px; top: 234px;">check that all Sprites are z-ordered properly.&nbsp; This way, you won't have to </span>
  <span class="xr_tl xr_s1" style="left: 202px; top: 252px;">stop and manually fix the z-order of sprites across several key-frames </span>
  <span class="xr_tl xr_s1" style="left: 202px; top: 269px;">once you're animating.</span>
 </div>
 <img class="xr_ap" src="index_htm_files/208.jpg" alt="" title="" style="left: 36px; top: 3349px; width: 194px; height: 292px;"/>
 <div class="xr_s4" style="position: absolute; left:36px; top:3690px; width:687px; height:610px;">
  <span class="xr_tl xr_s4" style="left: 420px; top: -14px;">Step 10) (Animating with bones and </span>
  <span class="xr_tl xr_s1" style="left: 420px; top: 3px;"><span class="xr_s4" style="">sprites) </span>If you've assigned sprites to </span>
  <span class="xr_tl xr_s1" style="left: 420px; top: 21px;">bones you'll see that if you rotate, move </span>
  <span class="xr_tl xr_s1" style="left: 420px; top: 39px;">or scale bones, the assigned sprites will </span>
  <span class="xr_tl xr_s1" style="left: 420px; top: 57px;">be effected with them.&nbsp; If all sprites are </span>
  <span class="xr_tl xr_s1" style="left: 420px; top: 74px;">assigned to bones you may not have a </span>
  <span class="xr_tl xr_s1" style="left: 420px; top: 92px;">need to ever select or edit a sprite </span>
  <span class="xr_tl xr_s1" style="left: 420px; top: 110px;">directly.&nbsp; If this is the case, you can lock&nbsp; </span>
  <span class="xr_tl xr_s1" style="left: 420px; top: 127px;">and/or even hide all sprites so that you </span>
  <span class="xr_tl xr_s1" style="left: 420px; top: 145px;">can not accidentally select or edit a sprite </span>
  <span class="xr_tl xr_s1" style="left: 420px; top: 163px;">by clicking on the show or lock buttons </span>
  <span class="xr_tl xr_s1" style="left: 420px; top: 181px;">along the top right of the canvas. You can </span>
  <span class="xr_tl xr_s1" style="left: 399px; top: 198px;">do the same for bones if you have a need at </span>
  <span class="xr_tl xr_s1" style="left: 399px; top: 216px;">any point to only edit sprites.To start </span>
  <span class="xr_tl xr_s1" style="left: 399px; top: 234px;">animating, first edit your starting frame by </span>
  <span class="xr_tl xr_s1" style="left: 399px; top: 252px;">selecting and moving, rotating, stretching or </span>
  <span class="xr_tl xr_s1" style="left: 399px; top: 269px;">changing the alpha (translucency) of any of </span>
  <span class="xr_tl xr_s1" style="left: 399px; top: 287px;">the sprites or bones.&nbsp; Then click on another </span>
  <span class="xr_tl xr_s1" style="left: 399px; top: 305px;">point along the time line and then adjust the </span>
  <span class="xr_tl xr_s1" style="left: 399px; top: 322px;">sprite or bones as necessary to create the </span>
  <span class="xr_tl xr_s1" style="left: 399px; top: 340px;">next key frame.&nbsp; Editing any sprite or bone </span>
  <span class="xr_tl xr_s1" style="left: 399px; top: 358px;">while on a new point in the time line will </span>
  <span class="xr_tl xr_s1" style="left: 399px; top: 376px;">automatically create a key frame.&nbsp; You can </span>
  <span class="xr_tl xr_s1" style="left: 399px; top: 393px;">also create a key frame at any time by </span>
  <span class="xr_tl xr_s1" style="left: 399px; top: 411px;">clicking on the &#8220;key all&#8221; button near the </span>
  <span class="xr_tl xr_s1" style="left: 399px; top: 429px;">bottom right of the canvas, or by clicking on </span>
  <span class="xr_tl xr_s1" style="left: 399px; top: 446px;">the key selected button while one or more </span>
  <span class="xr_tl xr_s1" style="left: 399px; top: 464px;">objects (sprites or bones) are selected. <span class="xr_s4" style=""><a href="key%20all%20vs%20key%20selected.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" >(See </a></span></span>
  <span class="xr_tl xr_s4" style="left: 399px; top: 482px;"><a href="key%20all%20vs%20key%20selected.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" >Key All vs Key Selected for more </a></span>
  <span class="xr_tl xr_s4" style="left: 399px; top: 500px;"><a href="key%20all%20vs%20key%20selected.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" >information</a>)</span>
 </div>
 <img class="xr_ap" src="index_htm_files/209.jpg" alt="" title="" style="left: 36px; top: 3682px; width: 412px; height: 189px;"/>
 <div class="xr_s4" style="position: absolute; left:37px; top:4303px; width:680px; height:299px;">
  <span class="xr_tl xr_s4" style="left: 508px; top: -14px;">Step 11) (Swapping a </span>
  <span class="xr_tl xr_s4" style="left: 508px; top: 3px;">sprites Image at any </span>
  <span class="xr_tl xr_s1" style="left: 508px; top: 21px;"><span class="xr_s4" style="">time)</span>&nbsp;You might have a </span>
  <span class="xr_tl xr_s1" style="left: 508px; top: 39px;">need in some animations </span>
  <span class="xr_tl xr_s1" style="left: 508px; top: 57px;">to actually swap out one </span>
  <span class="xr_tl xr_s1" style="left: 508px; top: 74px;">image with another at </span>
  <span class="xr_tl xr_s1" style="left: 508px; top: 92px;">some point.&nbsp; This can be </span>
  <span class="xr_tl xr_s1" style="left: 508px; top: 110px;">done by simply scrolling </span>
  <span class="xr_tl xr_s1" style="left: 508px; top: 127px;">to the point in the </span>
  <span class="xr_tl xr_s1" style="left: 508px; top: 145px;">animation you'd like an </span>
  <span class="xr_tl xr_s1" style="left: 508px; top: 163px;">image changed, selecting </span>
  <span class="xr_tl xr_s1" style="left: 508px; top: 181px;">the sprite by left clicking </span>
  <span class="xr_tl xr_s1" style="top: 198px;">on it in the canvas and then right-clicking any image in the file palette.&nbsp; When you play the animation or </span>
  <span class="xr_tl xr_s1" style="top: 216px;">scroll through the time-line you'll see that the sprite now changes from its original images to the new one </span>
  <span class="xr_tl xr_s1" style="top: 234px;">you'd selected at that exact moment in the animation.</span>
 </div>
 <img class="xr_ap" src="index_htm_files/210.jpg" alt="" title="" style="left: 36px; top: 3887px; width: 391px; height: 383px;"/>
 <img class="xr_ap" src="index_htm_files/211.jpg" alt="" title="" style="left: 36px; top: 4293px; width: 500px; height: 191px;"/>
 <div class="xr_s4" style="position: absolute; left:42px; top:294px; width:678px; height:436px;">
  <span class="xr_tl xr_s4" style="left: 419px; top: -14px;">Step 1) (Getting your images ready) </span>
  <span class="xr_tl xr_s1" style="left: 419px; top: 3px;">Create a project folder which will be </span>
  <span class="xr_tl xr_s1" style="left: 419px; top: 21px;">used for your Spriter </span>
  <span class="xr_tl xr_s1" style="left: 419px; top: 39px;">project.&nbsp; Then add sub-folders in which </span>
  <span class="xr_tl xr_s1" style="left: 419px; top: 57px;">you should organize the PNG images </span>
  <span class="xr_tl xr_s1" style="left: 419px; top: 74px;">you'll be using to create </span>
  <span class="xr_tl xr_s1" style="left: 419px; top: 92px;">your animations. For example:&nbsp; If you </span>
  <span class="xr_tl xr_s1" style="left: 419px; top: 110px;">were creating animation sets for a </span>
  <span class="xr_tl xr_s1" style="left: 419px; top: 127px;">platformer game, you might </span>
  <span class="xr_tl xr_s1" style="left: 419px; top: 145px;">first create the project folder and name </span>
  <span class="xr_tl xr_s1" style="left: 419px; top: 163px;">it &#8220;Platformer&#8221; and then inside that </span>
  <span class="xr_tl xr_s1" style="left: 419px; top: 181px;">folder you would create </span>
  <span class="xr_tl xr_s1" style="left: 419px; top: 198px;">other folder named &#8221;hero&#8221;, </span>
  <span class="xr_tl xr_s1" style="left: 419px; top: 216px;">&#8220;mushroom&#8221;, &#8220;turtle&#8221;, &#8220;effects&#8221;, &#8220;sub-</span>
  <span class="xr_tl xr_s1" style="left: 419px; top: 234px;">boss&#8221; etc and within each of those </span>
  <span class="xr_tl xr_s1" style="left: 419px; top: 252px;">folders you'd place the images you'll be </span>
  <span class="xr_tl xr_s1" style="left: 419px; top: 269px;">using to create and animate those </span>
  <span class="xr_tl xr_s1" style="top: 287px;">respective characters or objects.</span>
 </div>
 <img class="xr_ap" src="index_htm_files/212.jpg" alt="" title="" style="left: 36px; top: 284px; width: 417px; height: 285px;"/>
 <div class="xr_s1" style="position: absolute; left:36px; top:4586px; width:686px; height:343px;">
  <span class="xr_tl xr_s1" style="left: 508px; top: -14px;"><span class="xr_s4" style="">IMPORTANT:</span>&nbsp;When </span>
  <span class="xr_tl xr_s1" style="left: 508px; top: 3px;">swapping, a new image </span>
  <span class="xr_tl xr_s1" style="left: 508px; top: 21px;">will be placed in the exact </span>
  <span class="xr_tl xr_s1" style="left: 508px; top: 39px;">location of the current </span>
  <span class="xr_tl xr_s1" style="left: 508px; top: 57px;">image based on their </span>
  <span class="xr_tl xr_s1" style="left: 508px; top: 74px;">respective pivot points, so </span>
  <span class="xr_tl xr_s1" style="left: 508px; top: 92px;">it's very important to have </span>
  <span class="xr_tl xr_s1" style="left: 508px; top: 110px;">the default pivot-point of </span>
  <span class="xr_tl xr_s1" style="left: 508px; top: 127px;">the new image set </span>
  <span class="xr_tl xr_s1" style="left: 508px; top: 145px;">appropriately.&nbsp; One way to </span>
  <span class="xr_tl xr_s1" style="left: 504px; top: 163px;">ensure perfect continuity </span>
  <span class="xr_tl xr_s1" style="top: 181px;">when swapping from one image to the next is to actually insure that each image to be swapped has the </span>
  <span class="xr_tl xr_s1" style="top: 198px;">same exact pixel-dimensions as each other, and are arranged so that all of their default pivot points would </span>
  <span class="xr_tl xr_s1" style="top: 216px;">have the same exact pixel </span>
  <span class="xr_tl xr_s1" style="top: 234px;">coordinate.&nbsp; Look at all these head images as an example... all images are buffered with enough </span>
  <span class="xr_tl xr_s1" style="top: 252px;">transparent pixels to ensure the actual head images are placed per image in perfect alignment with each </span>
  <span class="xr_tl xr_s1" style="top: 269px;">other... so the exact same default pivot-point coordinates can be set for all...ensuring there will be no </span>
  <span class="xr_tl xr_s0" style="top: 287px;font-family:Times New Roman;"><span class="xr_s1" style="">jarring &#8220;pop&#8221; in position as one image is switched to the next.</span></span>
 </div>
 <img class="xr_ap" src="index_htm_files/213.jpg" alt="" title="" style="left: 36px; top: 4573px; width: 500px; height: 169px;"/>
 <div class="xr_s4" style="position: absolute; left:37px; top:4927px; width:679px; height:233px;">
  <span class="xr_tl xr_s4" style="left: 471px; top: -14px;">Step 12)&nbsp; (Editing the timing </span>
  <span class="xr_tl xr_s4" style="left: 471px; top: 3px;">of key-frames or the entire </span>
  <span class="xr_tl xr_s1" style="left: 471px; top: 21px;"><span class="xr_s4" style="">animation)&nbsp; </span>You'll likely find </span>
  <span class="xr_tl xr_s1" style="left: 471px; top: 39px;">as your animation progresses </span>
  <span class="xr_tl xr_s1" style="left: 471px; top: 57px;">that you'll need to tweak the </span>
  <span class="xr_tl xr_s1" style="left: 471px; top: 74px;">relative distance between key-</span>
  <span class="xr_tl xr_s1" style="left: 471px; top: 92px;">frames.&nbsp; To do so, you can </span>
  <span class="xr_tl xr_s1" style="left: 471px; top: 110px;">simple click and drag on any </span>
  <span class="xr_tl xr_s1" style="left: 471px; top: 127px;">key-frame in the time-line </span>
  <span class="xr_tl xr_s1" style="top: 145px;">located at the bottom of your screen.&nbsp; You can also hold the Cntrl key in order to be able to select multiple </span>
  <span class="xr_tl xr_s1" style="top: 163px;">key frames so you can move them simultaneously.</span>
 </div>
 <img class="xr_ap" src="index_htm_files/214.jpg" alt="" title="" style="left: 36px; top: 4917px; width: 464px; height: 134px;"/>
 <div class="xr_s1" style="position: absolute; left:36px; top:5141px; width:677px; height:208px;">
  <span class="xr_tl xr_s1" style="left: 490px; top: -14px;">It will also often be </span>
  <span class="xr_tl xr_s1" style="left: 490px; top: 3px;">necessary to expand or </span>
  <span class="xr_tl xr_s1" style="left: 490px; top: 21px;">reduce the total length of the </span>
  <span class="xr_tl xr_s1" style="left: 490px; top: 39px;">animation. To do so you can </span>
  <span class="xr_tl xr_s1" style="left: 490px; top: 57px;">simply left click in the </span>
  <span class="xr_tl xr_s1" style="left: 490px; top: 74px;">second number box of the </span>
  <span class="xr_tl xr_s1" style="top: 92px;">&#8220;current time&#8221; section of the time line.&nbsp; This will allow you to not only type in a new total length for the </span>
  <span class="xr_tl xr_s1" style="top: 110px;">animation, but will also present a check-box letting you either stretch the keys to maintain there relative </span>
  <span class="xr_tl xr_s1" style="top: 127px;">positions to each other or not.&nbsp; You can also preview your animation playing back at different speeds </span>
  <span class="xr_tl xr_s0" style="top: 145px;font-family:Times New Roman;"><span class="xr_s1" style="">simply by adjusting the playback speed slider at the left side of the time-line.</span></span>
 </div>
 <img class="xr_ap" src="index_htm_files/215.jpg" alt="" title="" style="left: 36px; top: 5129px; width: 482px; height: 91px;"/>
 <div class="xr_s4" style="position: absolute; left:36px; top:5339px; width:675px; height:341px;">
  <span class="xr_tl xr_s4" style="left: 440px; top: -14px;">Step 13) (Advanced time-line </span>
  <span class="xr_tl xr_s1" style="left: 440px; top: 3px;"><span class="xr_s4" style="">editing)&nbsp; </span>As your animation gets </span>
  <span class="xr_tl xr_s1" style="left: 440px; top: 21px;">closer to being perfected, you might </span>
  <span class="xr_tl xr_s1" style="left: 440px; top: 39px;">find the need to slightly offset the </span>
  <span class="xr_tl xr_s1" style="left: 440px; top: 57px;">timing of one or more objects </span>
  <span class="xr_tl xr_s1" style="left: 440px; top: 74px;">relative to the rest.&nbsp; Spriter actually </span>
  <span class="xr_tl xr_s1" style="left: 440px; top: 92px;">keeps separate time-lines and key </span>
  <span class="xr_tl xr_s1" style="left: 440px; top: 110px;">frame per object.&nbsp; To view and edit </span>
  <span class="xr_tl xr_s1" style="left: 440px; top: 127px;">them you need to expand the time-</span>
  <span class="xr_tl xr_s1" style="left: 440px; top: 145px;">line area upward by left clicking the </span>
  <span class="xr_tl xr_s1" style="left: 440px; top: 163px;">top of the time-line window upward.&nbsp; </span>
  <span class="xr_tl xr_s1" style="left: 440px; top: 181px;">Now you can left click and drag to </span>
  <span class="xr_tl xr_s1" style="left: 440px; top: 198px;">change the time position of any </span>
  <span class="xr_tl xr_s1" style="left: 440px; top: 216px;">objects key-frames.&nbsp; You can also </span>
  <span class="xr_tl xr_s1" style="left: 440px; top: 234px;">delete them via the delete key after </span>
  <span class="xr_tl xr_s0" style="left: 440px; top: 252px;font-family:Times New Roman;"><span class="xr_s1" style="">selecting them.</span></span>
 </div>
 <img class="xr_ap" src="index_htm_files/216.jpg" alt="" title="" style="left: 36px; top: 5331px; width: 431px; height: 272px;"/>
 <div class="xr_s1" style="position: absolute; left:36px; top:5646px; width:680px; height:203px;">
  <span class="xr_tl xr_s1" style="top: -14px;"><span class="xr_s4" style="">Step 14) (Duplicating entire key-frames) </span>You can also copy and paste an entire full frame to any other </span>
  <span class="xr_tl xr_s1" style="top: 3px;">place on the time-line by choosing the position the time-line to copy on the main time-line, then pressing </span>
  <span class="xr_tl xr_s1" style="top: 21px;">Cntrl+Shift+C, then by going to the target location on the main time-line and pressing Cntrl+V. This even </span>
  <span class="xr_tl xr_s1" style="top: 39px;">works if you are copying from a spot in the time-line that is not key-framed. This is&nbsp; often a fantastic way </span>
  <span class="xr_tl xr_s1" style="top: 57px;">to start a new animation for a character...by finding an point in an animation you'd already created that </span>
  <span class="xr_tl xr_s1" style="top: 74px;">comes somewhat close to the starting pose for the new animation.&nbsp; Just Cntrl+Shift+C to copy the initial </span>
  <span class="xr_tl xr_s1" style="top: 92px;">pose from an already existing animation, and then create your new animation, make sure you are at time 0 </span>
  <span class="xr_tl xr_s1" style="top: 110px;">(the very beginning) on the main time-line of the new animation, and then press Cntrl+V.</span>
 </div>
 <div class="xr_s1" style="position: absolute; left:36px; top:5834px; width:680px; height:254px;">
  <span class="xr_tl xr_s1" style="top: -14px;"><span class="xr_s4" style="">Step 15) (Adding additional sprites to a finished animation) </span>What if you've already created an entire </span>
  <span class="xr_tl xr_s1" style="top: 3px;">animation, with lots of key-frames, but then decide you should add something to the character...like </span>
  <span class="xr_tl xr_s1" style="top: 21px;">sunglasses for example?&nbsp; Spriter makes this easy.&nbsp; If you've animated your character with bones then </span>
  <span class="xr_tl xr_s1" style="top: 39px;">Spriter makes the solution simple.&nbsp; Simply go the the very first key-frame at time 0, add your sunglasses </span>
  <span class="xr_tl xr_s1" style="top: 57px;">image to the frame and perfect its position, scale, rotation etc to fit perfectly on the characters face.&nbsp; Then </span>
  <span class="xr_tl xr_s1" style="top: 74px;">assign that new sunglasses sprite to the head bone by selecting the head bone, holding B and then left-</span>
  <span class="xr_tl xr_s1" style="top: 92px;">clicking on the sunglasses sprite.&nbsp; You can test that the sunglasses are now firmly attached to the </span>
  <span class="xr_tl xr_s1" style="top: 110px;">characters face by rotating the head bone, and then pressing Cntrl+Z to undo the movement.&nbsp; Now that the </span>
  <span class="xr_tl xr_s1" style="top: 127px;">sunglasses are perfectly places and a child of the head bone, just select them, press Cntrl+C, then in the </span>
  <span class="xr_tl xr_s1" style="top: 145px;">menu, choose &#8220;edit/paste to all keys&#8221;, or by pressing Cntrl+Shift+V.&nbsp; After perhaps a few seconds of </span>
  <span class="xr_tl xr_s1" style="top: 163px;">processing, you can scroll through your time-line or play your animation to see that the sunglasses are </span>
  <span class="xr_tl xr_s1" style="top: 181px;">now properly positioned and attached to the head on all frames.</span>
 </div>
 <div class="xr_s4" style="position: absolute; left:380px; top:128px; width:10px; height:10px;">
  <span class="xr_tc xr_s4" style="left: -64px; top: -14px; width: 127px;">Getting Started</span>
 </div>
 <span class="xr_ar" style="left: -570px; top: 71px; width: 1900px; height: 24px; background-color: #2F7FAC;"></span>
 <span class="xr_ar xr_t5996" style="left: -570px; top: 0px; width: 1900px; height: 70px; background-color: #5DABD7; -o-transform: matrix(1.000,-0.000,0.000,-1.000,0,0); -webkit-transform: matrix(1.000,-0.000,0.000,-1.000,0,0); -ms-transform: matrix(1.000,-0.000,0.000,-1.000,0,0); transform: matrix(1.000,-0.000,0.000,-1.000,0,0);"></span>
 <!--[if lt IE 9]><style type="text/css">.xr_t5996 {margin-left:0px; margin-top:0px;filter:progid:DXImageTransform.Microsoft.Matrix(M11=1.000,M21=-0.000,M12=0.000,M22=-1.000,sizingMethod='auto expand')}</style><![endif]-->
 <div class="Heading_1" style="position: absolute; left:174px; top:47px; width:10px; height:10px;font-size:21px;color:#FFFFFF;">
  <h1 class="xr_tl Heading_1" style="top: -29px;font-size:21px;color:#FFFFFF;margin:0;"><a href="javascript:;" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="Heading_1" style="font-size:32px;color:#FFFFFF;">Spriter Pro</span></a><a href="javascript:;" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="Heading_1" style="color:#FFFFFF;">&nbsp;User&#8217;s Manual version 1.0</span></a></h1>
 </div>
 <div class="xr_s2" style="position: absolute; left:243px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -50px; top: -11px; width: 100px;"><a href="javascript:;" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Quickstart</span></a></span>
 </div>
 <div class="xr_s2" style="position: absolute; left:350px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -35px; top: -11px; width: 69px;"><a href="default%20pivot%20points.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Sprites</span></a></span>
 </div>
 <div class="xr_s2" style="position: absolute; left:441px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -31px; top: -11px; width: 63px;"><a href="creating%20and%20assigning%20bones.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Bones</span></a></span>
 </div>
 <div class="xr_s2" style="position: absolute; left:543px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -49px; top: -11px; width: 98px;"><a href="animating%20sprites%20and%20bones.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Animating</span></a></span>
 </div>
 <div class="xr_s2" style="position: absolute; left:679px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -79px; top: -11px; width: 157px;"><a href="what%20are%20character%20maps.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Character Maps</span></a></span>
 </div>
 <img class="xr_ap" src="index_htm_files/196.jpg" alt="" title="" style="left: 8px; top: 1px; width: 93px; height: 93px;"/>
 <div class="xr_s2" style="position: absolute; left:132px; top:86px; width:10px; height:10px;">
  <span class="xr_tc xr_s2" style="left: -27px; top: -11px; width: 54px;"><a href="index.htm" onclick="return(xr_nn());" onmousemove="xr_mo(this,0)" ><span class="xr_s2" style="">Index</span></a></span>
 </div>
 <a href="what%20is%20spriter.htm" onclick="return(xr_nn());">
  <img class="xr_ap" src="index_htm_files/197.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 17px; top: 103px; width: 34px; height: 34px;"/>
 </a>
 <a href="what%20is%20spriter.htm" onclick="return(xr_nn());">
  <img class="xr_ap" src="index_htm_files/198.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 17px; top: 6122px; width: 34px; height: 34px;"/>
 </a>
 <a href="starting%20a%20project.htm" onclick="return(xr_nn());">
  <img class="xr_ap" src="index_htm_files/199.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 710px; top: 6122px; width: 34px; height: 34px;"/>
 </a>
 <div id="xr_xo0" class="xr_ap" style="left:0; top:0; width:760px; height:100px; visibility:hidden;">
 <a href="" onclick="return(false);" onmousedown="xr_ppir(this);">
 </a>
 </div>
 <a href="starting%20a%20project.htm" onclick="return(xr_nn());">
  <img class="xr_ap" src="index_htm_files/200.png" alt="" title="" onmousemove="xr_mo(this,0,event)" style="left: 710px; top: 103px; width: 34px; height: 34px;"/>
 </a>
 <div id="xr_xd0"></div>
</div>
</div>
</div>
<!--[if lt IE 7]><script type="text/javascript" src="index_htm_files/png.js"></script><![endif]-->
<!--[if IE]><script type="text/javascript">xr_aeh()</script><![endif]--><!--[if !IE]>--><script type="text/javascript">xr_htm();window.addEventListener('load', xr_aeh, false);</script><!--<![endif]-->
</body>
</html>